import { Component } from 'react';
import { View, Label, CheckboxGroup, Checkbox } from '@tarojs/components';

class CustomList extends Component {
  handleChange = (id) => {
    this.props.delTodo(id);
  }
  render() {
    let { list } = this.props;
    let listItems = list.length > 0 ? list.map(item => {
      return (
        <View key={item.id}>
          <Label>
            {/* 小程序中Checkbox需要配合CheckboxGroup一起用 https://developers.weixin.qq.com/community/develop/doc/000280f8e4425826a62b990df5b400 */}

            <CheckboxGroup onChange={this.handleChange.bind(this, item.id)}>
              <Checkbox checked={item.finished}>{item.name}</Checkbox>
            </CheckboxGroup>
            
          </Label>
        </View>
      )
    }) : <View>Opps, nothing...</View>
    return (
      <View className='list-wrapper'>
        <View>{listItems}</View>
      </View>
    )
  }
}

export default CustomList;